import React from 'react';
import {Link} from 'react-router';
import {upload} from '../../utils';
import {CHANGE_USER_INFO} from '../../constants/userTypes';
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';
import UploadImg from '../../components/UploadImg/UploadImg';

/**
 * 加载样式或图片文件
 * */
import './sass/settings.scss';
import defaultAvatar from '../../containers/_common_img/sponsor/head.png';
import qrcode from "../_common_img/my-icon/qrcode.png";

// import 'antd/lib/tabs/style/index.less';


class Settings extends React.Component {
    constructor(props) {
        super(props);
        this.handleAvatarChange = this.handleAvatarChange.bind(this);
        this.state = {
            loadingVisible: false,
            avatar: ''
        };
    }

    handleAvatarChange(e) {
        const {actions, user} = this.props;

        // 未选择文件直接返回
        if (e.target.files.length == 0) return;

        var _this = this;
        _this.setState({
            loadingVisible: true
        });


        upload(function (base64) {
            _this.setState({avatar: base64});
        }, function (file) {
            console.log(file);
            let data = {
                avatar: "https://dn-iclass.qbox.me/" + file.key,
                colunms: 'avatar'
            };
            actions.changeUserInfo(data).then(res => {
                if (res.type === CHANGE_USER_INFO) {
                    if (res.data.code === 20000) {
                        _this.setState({
                            avatar: "https://dn-iclass.qbox.me/" + file.key + '?imageView2/1/w/80/h/80',
                            loadingVisible: false
                        });
                        console.log("修改头像成功");

                    } else {
                        _this.setState({
                            loadingVisible: false
                        });
                        alert(res.data.message)
                    }
                }
            });

        });
    }

    componentDidMount() {
        const {actions} = this.props;
        actions.fetchUserInfo();
    }

    render() {
        const {actions, user, home} = this.props;
        return (
            <MainSection className="settings" title="个人信息">
                <div className="set-row avatar-row">
                    <em>头像</em>
                    <UploadImg
                        id="avatar"
                        imgSrc={this.state.avatar || (user.userInfo && user.userInfo.avatar + '?imageView2/1/w/80/h/80')}
                        loadingVisible={this.state.loadingVisible}
                        buttonBg={defaultAvatar}
                        boxWidth="1.04rem"
                        boxHeight="1.04rem"
                        fileChange={this.handleAvatarChange}
                    />
                    <i className="icon-arrow"/>
                </div>
                <Link to="/userCenter/changeName" className="set-row">
                    <em>姓名</em>
                    <span className="fr color-6">{user.userInfo && user.userInfo.name}</span>
                    <i className="icon-arrow"/>
                </Link>
                <Link to="/userCenter/changePhone" className="set-row">
                    <em>手机号</em>
                    <span className="fr color-6">{user.userInfo && user.userInfo.phone}</span>
                    <i className="icon-arrow"/>
                </Link>
                <Link to="/userCenter/myQrcode" className="set-row qrcode-row">
                    <em>二维码</em>
                    <img className="fr icon-qrcode" src={qrcode} alt=""/>
                    <i className="icon-arrow"/>
                </Link>
            </MainSection>
        );
    }
}

export default Settings;